<template>
  <el-row
    :gutter="0"
    class="topbar-wrapper"
    :style="{ background: navbarBackground }"
  >
    <el-col :xl="4" :lg="4" :md="4" :sm="6" :xs="6">
      <div class="topbar-logo">
        <a :href="getFullPath('/')">
          <img
            class="mi-logo"
            src="https://cdn.cnbj1.fds.api.mi-img.com/s02.mifile.cn/assets/static/image/logo-mi2.png"
            loading="lazy"
            alt="小米官网"
          />
        </a>
      </div>
    </el-col>
    <el-col :xl="16" :lg="16" :md="16" :sm="12" :xs="12">
      <ul class="topbar-navlist">
        <a
          v-for="line in props.navList"
          :key="line.id"
          :href="line.href"
          target="_blank"
        >
          <li class="navlist-item" :class="[line.active ? 'active' : '']"
            >{{ line.name }}
          </li>
        </a>
      </ul>
    </el-col>
    <el-col :xl="4" :lg="4" :md="4" :sm="6" :xs="6" v-if="!userWasLogin">
      <div class="accredit">
        <router-link :to="{ path: '/auth', query: { type: 'login' } }">
          <span>登录</span>
        </router-link>
        <div class="line">|</div>
        <router-link :to="{ path: '/auth', query: { type: 'register' } }">
          <span>注册</span>
        </router-link>
      </div>
      <div class="navlist-menu">
        <el-icon
          class="navlist-menu-icon"
          @click="handleExpand('accredit')"
          :style="{ display: controls.accreditBox ? 'none' : 'block' }"
          ><UserFilled
        /></el-icon>
        <el-icon
          class="navlist-menu-icon"
          @click="handleExpand('accredit')"
          :style="{ display: controls.accreditBox ? 'block' : 'none' }"
        >
          <CloseBold />
        </el-icon>
        <div class="navlist-accredit-content" v-if="controls.accreditBox">
          <ul class="expand-accredit-list">
            <li class="expand-accredit-item">
              <router-link :to="{ path: '/auth', query: { type: 'login' } }">
                <span>登录</span>
              </router-link>
            </li>
            <li class="expand-accredit-item">
              <div class="line">|</div>
            </li>
            <li class="expand-accredit-item">
              <router-link :to="{ path: '/auth', query: { type: 'register' } }">
                <span>注册</span>
              </router-link>
            </li>
          </ul>
        </div>
        <el-icon
          class="navlist-menu-icon"
          @click="handleExpand('menuList')"
          :style="{ display: controls.menuListBox ? 'none' : 'block' }"
          ><Fold
        /></el-icon>
        <el-icon
          class="navlist-menu-icon"
          @click="handleExpand('menuList')"
          :style="{ display: controls.menuListBox ? 'block' : 'none' }"
        >
          <CloseBold />
        </el-icon>
        <div class="navlist-menu-content" v-if="controls.menuListBox">
          <ul class="expand-menu-list">
            <a
              v-for="line in props.navList"
              :key="line.id"
              :href="line.href"
              target="_blank"
              style="padding: 0px"
            >
              <li
                class="expand-menu-item"
                :class="[line.active ? 'active' : '']"
              >
                {{ line.name }}
                <el-icon><ArrowRight /></el-icon>
              </li>
            </a>
          </ul>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref, watch } from "vue";
  import { Control, NavList } from "./../../../types/Home";
  import { getFullPath } from "@/utils/path";

  const scrollDistance = ref(0);

  const navbarBackground = ref("transparent");

  let userWasLogin = ref(false);

  let controls = reactive<Control>({
    accreditBox: false,
    menuListBox: false,
  });

  const props = withDefaults(defineProps<{ navList: NavList[] }>(), {
    navList: () => [
      { id: 1, name: "小米官网", href: "/", active: true },
      { id: 2, name: "小米商城", href: "/#/shop" },
      { id: 3, name: "小米澎湃OS", href: "/#/hyperos" },
      { id: 4, name: "小米汽车", href: "/#/car" },
      { id: 5, name: "小米影像", href: "/#/visual" },
      { id: 6, name: "云服务", href: "https://i.mi.com/" },
      { id: 7, name: "Iot", href: "https://iot.mi.com/" },
      { id: 8, name: "有品", href: "/youpin" },
      { id: 9, name: "小爱开放平台", href: "https://xiaoai.mi.com/" },
      {
        id: 10,
        name: "Location",
        href: "https://www.mi.com/a/h/28031.html?sign=16e89fe1079f3f505dfeac5481b7a4d5",
      },
    ],
  });

  const backgroundColor = {
    show: "#000",
    hide: "transparent",
  };

  window.addEventListener("scroll", () => {
    scrollDistance.value = document.documentElement.scrollTop;
  });

  watch(
    scrollDistance,
    (newValue) => {
      if (newValue > 60) {
        navbarBackground.value = backgroundColor.show;
      } else {
        navbarBackground.value = backgroundColor.hide;
      }
    },
    { immediate: true }
  );

  const handleExpand = (label: "accredit" | "menuList") => {
    if (label === "accredit") {
      controls.accreditBox = !controls.accreditBox;
      controls.menuListBox = false;
    } else if (label === "menuList") {
      controls.menuListBox = !controls.menuListBox;
      controls.accreditBox = false;
    }

    if (!controls.accreditBox && !controls.menuListBox) {
      navbarBackground.value = backgroundColor.hide;
    } else {
      navbarBackground.value = backgroundColor.show;
    }
  };

  onMounted(() => {
    const userInfo = localStorage.getItem("userInfo");
    if (userInfo && userInfo === "user was login") {
      userWasLogin.value = true;
    }

    window.addEventListener("resize", () => {
      if (window.innerWidth > 800) {
        for (const control in controls) {
          if (controls.hasOwnProperty(control)) {
            controls[control as keyof typeof controls] = false;
          }
        }
      }
    });
  });
</script>

<style scoped lang="scss">
  @use "@/styles/variable" as *;
  @use "@/styles/mixin" as *;

  .topbar-wrapper {
    width: 100%;
    height: 65px;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 100;
    padding: 0 15px;

    .active {
      color: $themeColor !important;
    }

    .topbar-logo {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      height: 65px;
    }

    .mi-logo {
      width: 35px;
      height: 35px;
    }

    .topbar-navlist,
    .accredit,
    .navlist-menu {
      height: 65px;
      display: flex;
      flex-flow: row nowarp;
      justify-content: space-around;
      align-items: center;
      color: $bsWhite;
      font-size: 16px;
      font-weight: 400;
      cursor: $cursor;
      list-style: none;
    }

    a {
      padding: 20px;
      text-decoration: none;

      :hover {
        color: $themeColor;
      }
    }

    .navlist-item {
      text-decoration: none;
      color: $bsWhite;
      font-size: 14px;
    }

    .accredit {
      display: flex;
      justify-content: end;
      align-items: center;
      font-size: 14px;

      span {
        padding: 5px;
        color: $bsWhite;

        & > :hover {
          color: $themeColor;
        }
      }
    }

    .navlist-menu {
      min-height: 60px;
      display: none;
    }

    .navlist-menu-icon {
      margin: 15px;
      font-size: 25px;
    }

    .navlist-menu-content,
    .navlist-accredit-content {
      width: 100vw;
      height: calc(100vh - 65px);
      position: fixed;
      left: 0;
      top: 65px;
      background: $bsBlack;
      transition: all 0.1s ease-in-out;
      z-index: 1000;
      box-sizing: border-box;
      overflow-y: auto;
      padding-bottom: 20px;
    }
    .navlist-accredit-content {
      width: 100vw;
      height: 90px;
    }

    .expand-menu-list,
    .expand-accredit-list {
      @include borderTop;
      margin: 0px 25px;
    }

    .expand-menu-list,
    a {
      padding: 5px;
      text-decoration: none;
      color: $bsWhite;
    }

    .expand-menu-item {
      height: 65px;
      line-height: 65px;
      align-items: center;
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      white-space: nowrap;
      color: #ccc;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0 auto;
    }

    .expand-accredit-list {
      height: 90px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-around;
      align-items: center;
      list-style: none;
    }

    .expand-accredit-list:first-child {
      @include borderTop;
    }

    .expand-accredit-item {
      text-align: center;
    }
  }

  @media screen and (max-width: 768px) {
    .topbar-wrapper {
      .topbar-navlist {
        display: none;
      }

      .accredit {
        margin: 0;
        font-size: 12px;
        display: none;
      }

      .navlist-menu {
        display: block;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
</style>
